<template>
  <div class="flex-column segment-list-box page-cutover">
    <!-- 路由列表 -->
    <link-segment-list
      v-show="!showSelect"
      ref="linkSegmentList"
      page-name="detect"
      @operate="operate"
      @reloadAll="reloadAll"
    />
    <!-- 端口选择 -->
    <channel-port-selector
      ref="channelPortSelector"
      :show-select="showSelect"
      :form-data="formData"
      :route-data="routeData"
      @next="next"
      @goBack="goBack"
    />
    <edit :form-data="formData" :visible="showNext" @close="close" />
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import LinkSegmentList from '@/components/LinkSegmentList'
  import ChannelPortSelector from './components/ChannelPortSelector'
  import Edit from './Edit'

  export default {
    components: { Edit, ChannelPortSelector, LinkSegmentList },
    data() {
      return {
        showNext: false,
        segmentList: null,
        formData: {
          bizType: 'LINK_DETECT',
          processName: '',
          cut: false,
          portList: [],
          otdrParam: {}
        },
        routeData: {},
        showSelect: false
      }
    },
    computed: {
      ...mapGetters(['dictList'])
    },
    deactivated() {
      this.showSelect = false
    },
    methods: {
      reloadAll(searchData) {
        this.$refs.channelPortSelector && this.$refs.channelPortSelector.loadData(searchData)
      },
      operate(data) {
        this.routeData = data.data
        this.$refs.channelPortSelector &&
          this.$refs.channelPortSelector.routeChange(data.data.segmentId)
        this.showSelect = true
      },
      //   下一步
      next() {
        console.log('this.formData', this.formData)
        this.showNext = true
      },
      close(data) {
        this.showNext = false
        if (data === true) {
          this.showSelect = false
          this.formData = { ...this.$options.data().formData }
          this.$refs.channelPortSelector && this.$refs.channelPortSelector.loadData()
        }
      },
      goBack() {
        this.showSelect = false
        this.$nextTick(() => {
          this.$refs.linkSegmentList.doLayout()
        })
      }
    }
  }
</script>

<style scoped lang="scss"></style>
